import React, { Component } from 'react'

import { connect } from 'react-redux'

import { loadDataAsync } from '../store/actionCreator/home'

@connect(
  state => ({
    show: state.profile.show,
    list: state.home.list
  }),
  dispatch => ({
    loadData() {
      dispatch(loadDataAsync())
    }
  })
)
class Home extends Component {
  render() {
    let list = this.props.list.map((item, index) => <li key={item+index}>{item}</li>)
    return (
      <>
        {
          this.props.show && <ul>{list}</ul>
        }
      </>
    )
  }

  componentDidMount() {
    this.props.loadData()
  }
}

export default Home
